<template>
  <view class="page">
    <view class="top">
      <view class="top-1 flex">
        <view class="top-1-1">请填写提现信息</view>
        <view class="top-1-1" @click="handleNav('/pagesB/my/wallet/withdrawalHistory')">查看提现历史</view>
      </view>
    </view>
    <view class="box">
      <u-form :model="form" :rules="dynamicRules" ref="uForm" class="u-form">
        <u-form-item label="提现分类" prop="withdrawal_type" borderBottom required labelWidth="70">
          <u-radio-group v-model="form.withdrawal_type" placement="row" @change="groupChange">
            <u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.value"
              activeColor="#FFBB50" labelSize="13">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="提现方式" prop="withdrawal_way" borderBottom required labelWidth="70">
          <u-radio-group v-model="form.withdrawal_way" placement="row" @change="groupChangeWay">
            <u-radio v-for="(item, index) in wayList" :key="index" :label="item.name" :name="item.value"
              activeColor="#FFBB50" labelSize="13">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="提现金额" prop="withdrawal_price" borderBottom required labelWidth="70">
          <u-input v-model="form.withdrawal_price" border="none" type="digit" placeholder="请输入提现金额"></u-input>
        </u-form-item>
        <block v-if="form.withdrawal_way === 'bank_card'">
          <u-form-item label="开户银行" prop="bank_card.bank_of_deposit" borderBottom required labelWidth="70">
            <u-input v-model="form.bank_card.bank_of_deposit" border="none" placeholder="请输入开户银行"></u-input>
          </u-form-item>
          <u-form-item label="银行账号" prop="bank_card.card_number" borderBottom required labelWidth="70">
            <u-input v-model="form.bank_card.card_number" border="none" placeholder="请输入银行账号"></u-input>
          </u-form-item>
          <u-form-item label="开户姓名" prop="bank_card.account_name" borderBottom labelWidth="70" required>
            <u-input v-model="form.bank_card.account_name" border="none" placeholder="请输入开户姓名"></u-input>
          </u-form-item>
        </block>
        <block v-else-if="form.withdrawal_way === 'wechat'">
          <u-form-item label="微信账号" prop="account.account" borderBottom labelWidth="70" required>
            <u-input v-model="form.account.account" border="none" placeholder="请输入微信账号"></u-input>
          </u-form-item>
          <u-form-item label="微信昵称" prop="account.name" borderBottom labelWidth="70" required>
            <u-input v-model="form.account.name" border="none" placeholder="请输入微信昵称"></u-input>
          </u-form-item>
        </block>
        <block v-else>
          <u-form-item label="支付宝账号" prop="account.account" borderBottom labelWidth="70" required>
            <u-input v-model="form.account.account" border="none" placeholder="请输入支付宝账号"></u-input>
          </u-form-item>
          <u-form-item label="支付宝昵称" prop="account.name" borderBottom labelWidth="70" required>
            <u-input v-model="form.account.name" border="none" placeholder="请输入支付宝昵称"></u-input>
          </u-form-item>
        </block>
        <u-form-item label="手机号码" prop="phone" borderBottom labelWidth="70" required>
          <u-input v-model="form.phone" border="none" type="number" placeholder="请输入手机号码"></u-input>
        </u-form-item>
        <u-form-item label="证件类型" prop="type_zj" borderBottom labelWidth="70" required @click="show = true">
          <u-input v-model="form.type_zj" border="none" type="number" disabled placeholder="请选择证件类型"></u-input>
        </u-form-item>
        <u-form-item label="证件号码" prop="identification_number" borderBottom labelWidth="70" required>
          <u-input v-model="form.identification_number" border="none" placeholder="请输入证件号码"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="bottom flex">
      <view class="bottom-btn" @click="handleSub">确认</view>
    </view>
    <u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @cancel="handleclose"
      closeOnClickOverlay immediateChange="true"></u-picker>
  </view>
</template>
<script>
import { basicSettings, applyFor } from "@/utils/request.js";
export default {
  data() {
    return {
      form: {
        withdrawal_type: '',
        withdrawal_way: '',
        withdrawal_price: "",
        bank_card: {
          bank_of_deposit: "",
          card_number: "",
          account_name: ""
        },
        account: {
          account: "",
          name: ""
        },
        phone: "",
        id_type_id: "",
        identification_number: ""
      },
      columns: [],
      rules: {
        price: [
          {
            type: "string",
            required: true,
            message: "请填写提现金额",
            trigger: ["blur", "change"],
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            trigger: ["change", "blur"],
          }
        ],
        withdrawal_price: [
          {
            type: "string",
            required: true,
            message: "请输入提现金额",
            trigger: ["blur"],
          }
        ],
        withdrawal_type: [
          {
            type: "string",
            required: true,
            message: "请选择提现分类",
            trigger: ["blur", "change"],
          }
        ],
        type_zj: [
          {
            type: "string",
            required: true,
            message: "请选择证件类型",
            trigger: ["blur", "change"],
          }
        ],
        identification_number: [
          {
            type: "string",
            required: true,
            message: "请填写证件号码",
            trigger: ["blur", "change"],
          }
        ]
      },
      show: false,
      radiolist1: [
      ],
      wayList: [
      ],
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    this.$refs.uForm.setRules(this.dynamicRules);
  },
  onLoad() {
    this.basicSettings().then(res => {
      if (res) {
        this.wayList = this.withdrawalWayArray(res.withdrawal_way)
        this.form.withdrawal_way = this.wayList[0].value
        this.radiolist1 = this.withdrawalWayArray(res.withdrawal_type)
        this.form.withdrawal_type = this.radiolist1[0].value
        this.columns = [this.withdrawalWayArray(res.id_type)]
        this.updateDynamicRules()
      }
    })
  },
  methods: {
    async basicSettings(data) {
      return basicSettings(data)
    },
    async applyFor(data) {
      return applyFor(data)
    },
    withdrawalWayArray(withdrawalWay) {
      return Object.keys(withdrawalWay).map(key => ({
        name: withdrawalWay[key],
        value: key
      }));
    },
    dynamicRules() {
      const rules = { ...this.rules };
      if (this.form.withdrawal_way === 'bank_card') {
        rules["bank_card.bank_of_deposit"] = [
          {
            type: "string",
            required: true,
            message: "请填写开户银行",
            trigger: ["blur", "change"],
          }
        ];
        rules["bank_card.card_number"] = [
          {
            type: "string",
            required: true,
            message: "请填写银行账号",
            trigger: ["blur", "change"],
          }
        ];
        rules["bank_card.account_name"] = [
          {
            type: "string",
            required: true,
            message: "请填写开户姓名",
            trigger: ["blur", "change"],
          }
        ];
      } else if (this.form.withdrawal_way === 'wechat') {
        rules["account.account"] = [
          {
            type: "string",
            required: true,
            message: "请填写微信账号",
            trigger: ["blur", "change"],
          }
        ];
        rules["account.name"] = [
          {
            type: "string",
            required: true,
            message: "请填写微信昵称",
            trigger: ["blur", "change"],
          }
        ];
      } else if (this.form.withdrawal_way === 'alipay') {
        rules["account.account"] = [
          {
            type: "string",
            required: true,
            message: "请填写支付宝账号",
            trigger: ["blur", "change"],
          }
        ];
        rules["account.name"] = [
          {
            type: "string",
            required: true,
            message: "请填写支付宝昵称",
            trigger: ["blur", "change"],
          }
        ];
      }
      return rules;
    },
    handleclose(e) {
      this.show = !this.show;
    },
    groupChange(value) {
      console.log(value)
      this.form.withdrawal_type = value;
      this.$refs.uForm.validateField("withdrawal_type");
    },
    updateDynamicRules() {
      this.$nextTick(() => {
        this.$refs.uForm.setRules(this.dynamicRules());
      });
    },
    groupChangeWay(value) {
      this.form.withdrawal_way = value;
      this.$refs.uForm.validateField("withdrawal_way");
      this.updateDynamicRules();
    },
    confirm(e) {
      this.form.type_zj = e.value[0].name
      this.form.id_type_id = e.value[0].value;
      this.show = false;
    },
    handleNav(url) {
      uni.navigateTo({ url: url });
    },
    handleSub() {
      this.$refs.uForm.validate().then(res => {
        // 提交表单
        console.log("提交成功", this.form);
        this.applyFor(this.form).then(res => {
          if (res) {
            uni.showToast({
              title: '提交成功',
              icon: 'success',
              mask: true
            })
            setTimeout(() => {
              uni.navigateBack({ delta: 1 })
            }, 1500)
          }
        })
      }).catch(errors => {
        // uni.$u.toast('校验失败')
      })
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .u-form {
  width: 694rpx !important;
  margin: 0 auto;

  text {
    font-size: 25rpx;
  }

  .u-input {
    background: transparent !important;
    font-size: 26rpx !important;
  }

  .u-radio {
    margin-right: 12rpx;
    font-size: 27rpx;
  }

  .u-form-item__body__left__content__required {
    top: 0;
  }
}

::v-deep .u-action-sheet {
  button {
    font-size: 30rpx !important;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: flex-end;
  height: 104rpx;
  background: #ffffff;

  .bottom-btn {
    width: 176rpx;
    height: 68rpx;
    border-radius: 132rpx;
    background: #ffbb50;
    line-height: 68rpx;
    text-align: center;
    color: #ffffff;
    font-size: 25rpx;
    margin-right: 26rpx;
  }
}

.box {
  width: 100%;
  background: #ffffff;
  margin-top: 24rpx;
}

.top {
  width: 100%;
  padding: 26rpx 0;
  background: #ffffff;

  .top-1 {
    justify-content: space-between;
    width: 694rpx;
    margin: 0 auto;

    .top-1-1 {
      font-size: 25rpx;
    }
  }
}
</style>